<template>
  <div class="headerMain">
    <v-card class="pcContent" v-if="isPC">
      <div class="top">
        <div class="topMain d-flex align-center">
          <div class="header_left flex">
            <v-img
              :lazy-src="require('@/assets/images/home/logo.png')"
              class="logo"
              :contain="true"
              :src="require('@/assets/images/home/logo.png')"
            ></v-img>
          </div>
          <div class="header_Right d-flex flex-1 justify-end">
            <div
              v-for="(drawItem, idx) in drawerList"
              @click="jumpHref(drawItem)"
              class="header_Right_item"
              :class="drawerIndex === idx ? 'selected' : ''"
              :key="idx"
            >
              {{ drawItem.title }}
            </div>
          </div>
          <img
            @click="showLanguage"
            class="china"
            src="@/assets/images/home/china.png"
            alt=""
          />
        </div>
      </div>
    </v-card>
    <div class="mobile" v-if="!isPC">
      <div class="d-flex align-center" style="height: 100%">
        <img class="logo" src="@/assets/images/home/logo.png" alt="" />
        <div class="d-flex flex-1 justify-end">
          <img class="china" src="@/assets/images/home/china.png" alt="" />
          <v-app-bar-nav-icon @click.stop="onDrawer"></v-app-bar-nav-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data: () => ({
    drawer: false,
    group: null,
    drawerIndex: 0,
    width: 0,
    height: 0,
    // clientWidth: 0,
    drawerList: [
      { title: "HOME", url: "/" },
      { title: "METAVERSE", url: "/" },
      { title: "TOKEN", url: "/" },
      { title: "ROADMAP", url: "/" },
      { title: "FAQ", url: "/" },
      { title: "BLIND BOX", url: "/blindBox" },
      { title: "POOL", url: "/pool" },
      { title: "BOUNTY", url: "/nftMarket" },
      { title: "DOCS", url: "/" },
    ],
  }),
  computed: {
    isPC() {
      return this.$store.state.clientWidth > 960 ? true : false;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onDrawer() {
      this.drawer = !this.drawer;
      this.$emit("onDrawer", this.drawer);
    },
    jumpHref(item) {
      this.$router.push({ path: item.url });
    },
    showLanguage() {
      this.$emit("onChangeLanguage", true);
    },
  },
};
</script>
<style scoped lang="scss">
@import "./../../../common/styles/common.scss";

.headerMain {
  .flex-1 {
    @include flex_1();
  }
  .pcContent {
    .top {
      position: fixed;
      height: 90px;
      z-index: 6;
      width: 100%;
      background-color: #fad551;
      width: 100%;

      .topMain {
        width: 1200px;
        margin: auto;
        height: 100%;
        .header_left {
          .logo {
            @include wh(135px, 40px);
          }
        }
        .china {
          width: 48px;
          height: 48px;
          border-radius: 30px;
        }
      }

      .header_Right {
        white-space: nowrap;
        .header_Right_item {
          color: #431216;
          padding: 6px 4px;
          margin-right: 24px;
          position: relative;
          -webkit-transition: opacity 0.2s ease, font-weight 0.2s ease;
          transition: opacity 0.2s ease, font-weight 0.2s ease;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          opacity: 0.6;
          font-weight: 700;
          cursor: pointer;
        }
        .header_Right_item:hover {
          opacity: 1;
        }
        .selected {
          opacity: 1;
        }
      }
    }
  }
  .mobile {
    background-color: #fad551;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    height: 68px;
    .logo {
      @include wh(126px, 36px);
    }
    .china {
      width: 35px;
      height: 35px;
      border-radius: 30px;
    }
  }
}
</style>